<template>
    <view>
        <view class="uni-padding-wrap" @click="onClick" v-if="showTitle">
            <view class="uni-title">{{title}}<text class="t-txt" :class="title ? 't-txt-e' : ''">{{year}}年{{month}}月{{day}}日{{hour}}时{{minute}}分</text></view>
        </view>
        <picker-view v-if="show" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in years" :key="index" :class="year == item ? 'cur-color' : ''">{{item}}年</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in months" :key="index" :class="month == item ? 'cur-color' : ''">{{item}}月</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in days" :key="index" :class="day == item ? 'cur-color' : ''">{{item}}日</view>
            </picker-view-column>
			<picker-view-column v-if="showHm">
			    <view class="item" v-for="(item,index) in hours" :key="index" :class="hour == item ? 'cur-color' : ''">{{item}}时</view>
			</picker-view-column>
			<picker-view-column v-if="showHm">
			    <view class="item" v-for="(item,index) in minutes" :key="index" :class="minute == item ? 'cur-color' : ''">{{item}}分</view>
			</picker-view-column>
        </picker-view>
    </view>
</template>
<script>
    export default {
		props:["title","visible"],
        data: function () {
            const date = new Date();
			const sYear = 1970;
			const eYear = 2100;
            const years = [];
            const year = date.getFullYear();
            const months = [];
            const month = date.getMonth() + 1;
            const days = [];
            const day = date.getDate();
			const hours = [];
			const hour = date.getHours();
			const minutes = [];
			const minute = date.getMinutes();
            for (let i = sYear; i <= eYear; i++) 
			{
                years.push(i);
            }
			
            for (let i = 1; i <= 12; i++) 
			{
                months.push(i);
            }
		
            for (let i = 1; i <= 31; i++) 
			{
				if(year % 4 == 0 || year % 100 == 0)//闰年
				{
					if(month == 2)
					{
						days.push(i);
						if(i == 29)break;
					}
				}
				else//平年
				{
					if(month == 2)
					{
						days.push(i);
						if(i == 28)break;
					}
				}
				if(month == 4 || month == 6 || month == 9 || month == 11)
				{
					days.push(i);
					if(i == 30)break;
				}
				else
				{
					days.push(i);
				}
            }
			
			for (let i = 0; i <= 23; i++)
			{
			    hours.push(i);
			}
			for (let i = 0; i <= 59; i++) 
			{
			    minutes.push(i);
			}
            return {
                years,
                year,
                months,
                month,
                days,
                day,
				hours,
				hour,
				minutes,
				minute,
                value: [year-sYear, month-1, day-1, hour, minute],
				sYear,
                indicatorStyle: `height: 30px;`,
				smallMoth:[4,6,9,11],
				
				show:this.visible,
				isOpen:false,
				
				showHm : true,
				showTitle : true,
            }
        },
		
		mounted() {
			this.setbufTime()
		},
		
        methods: {
            bindChange: function (e) {
				console.log('时间',e.detail.value);
                const val = e.detail.value;
                this.year = this.years[val[0]];
                this.month = this.months[val[1]];
				this.yyear();
                this.day = this.days[val[2]];
				this.hour = this.hours[val[3]];
				this.minute = this.minutes[val[4]];
				let timeTxt = this.year +  "-" + this.month  + "-" + this.day + " " + this.hour + ":" + (this.minute>9 ? this.minute : "0" + this.minute) + ":00";
				this.$emit("changeTime",timeTxt);
            },
			
			setbufTime(){
				let timeTxt = this.year +  "-" + this.month  + "-" + this.day + " " + this.hour + ":" + (this.minute>9 ? this.minute : "0" + this.minute) + ":00";
				this.$emit("changeTime",timeTxt);
			},

			setData()
			{
				this.show = true;
				this.showHm = false;
				this.showTitle = false;
			},
			
			setTime(y,m,d)
			{
				console.log("y=:",y,"m=",m,"d=",d);
				this.year = y;
				this.month = m;
				this.day  = d;
				let sy = 1970;
				this.value = [y-sy,m-1,d-1,0,0];
			},
			
			yyear()
			{
				/**闰年***/
				this.days = [];
				let len = 31;
				if(this.year % 4 == 0 || this.year % 100 == 0 )
				{
					 //闰年
					if(this.month == 2)
					{
						len = 29;
					}
					else
					{
						if(this.checkSmallMoth(this.month)) //小月
							len = 30;
					}
				}
				else
				{
					if(this.month == 2)
					{
						len = 28;
					}
					else
					{
						if(this.checkSmallMoth(this.month)) //小月
							len = 30;
					}
				}
				
				for (let i = 1; i <= len; i++)
				{
					this.days.push(i);
				}
			},
			
			onClick()
			{
				this.isOpen = true;
				this.show = !this.show; 
			},
			
			checkSmallMoth(m)
			{
				let isSmall = false;
				for(let i= 0 ;i<this.smallMoth.length; i++)
				{
					if(m == this.smallMoth[i])
					{
						isSmall = true;
						break;
					}
				}
				return isSmall;
			}
        }
    }
</script>
<style>
    .picker-view {
        width: 460px;
        height: 160px;
        margin-top: 10px ;
		background-color: #fff;
    }
    .item {
        height: 30px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
	
	.t-txt{
		padding-left: 0px;
		cursor: pointer;
	}
	.t-txt-e
	{
		padding-left: 30px;
	}
	.cur-color
	{
		color: #3388ff
	}
</style>